<template>
  <div id="Home">

    <el-card class="top" shadow="never">
      <div>
        <img :src="logo" class="logo">
        <h1>霖的学习实例</h1>
      </div>
      <div>
        <input type="text" placeholder="搜索项目" v-model="inputText">
      </div>
    </el-card>

    <el-card class="main"  shadow="never">


      <div v-show="inputText == ''" class="left">
        <el-card>

          <h2>Vue</h2>
          <el-row class="list" :gutter="20">
            <el-col v-for="(item,i) in Vue" :key="i" :span="6"><a :href="item.url">{{item.name}}</a></el-col>
          </el-row>

          <h2>jQueryAjax</h2>
          <el-row class="list" :gutter="20">
            <el-col v-for="(item,i) in jQueryAjax" :key="i" :span="6"><a :href="item.url">{{item.name}}</a></el-col>
          </el-row>
          
          <h2>CssJsCode</h2>
          <el-row class="list" :gutter="20">
            <el-col v-for="(item,i) in CssJsCode" :key="i" :span="6"><a :href="item.url">{{item.name}}</a></el-col>
          </el-row>

          <h2>firstCode</h2>
          <el-row class="list" :gutter="20">
            <el-col v-for="(item,i) in firstCode" :key="i" :span="6"><a :href="item.url">{{item.name}}</a></el-col>
          </el-row>

        </el-card>
      </div>

      <div v-show="inputText != ''" class="left">
          <el-card>
             <el-row class="list" :gutter="20">
                <el-col v-for="(item,i) in listSo" :key="i" :span="6"><a :href="item.url">{{item.name}}</a></el-col>
              </el-row>
          </el-card>
      </div>


      <div class="right"><Msg></Msg></div>
    </el-card>

  <!-- <el-card class="bottom" shadow="never"> -->
    <el-card class="container" shadow="never">
      <a href="mailto:lyz_niubi@163.com">站长邮箱：lyz_niubi@163.com</a>
      <a href="beian.miit.gov.cn">晋ICP备20007682号-1</a>
    </el-card>
  <!-- </el-card> -->


  </div>
</template>

<script>
import logo from "@/assets/logo.jpg"
import Msg from "./Msg"

export default {
  name:"Home",
  data(){
    return {
      logo:"",
      inputText:"",
      Vue: [
          { name: "第一次速写Vue轮播图", url: './code/Vue/vue 第一次自制轮播图/index.html' },
          { name: "Vue图书管理", url: './code/Vue/vue图书管理/Vue.html' },
          { name: "Vue点击切换对应图片", url: './code/Vue/点击切换图片/Vue.html' },
          { name: "Vue路由小实例", url: './code/Vue/路由实例/Vue.html' },
          { name: "Vue组件化购物车", url: './code/Vue/组件化购物车/Vue.html' },
          { name: "VueX提醒事项录入", url: './code/Vue/Vuex-app/dist/index.html' },
          { name: "Vue模糊搜索列表", url: './code/Vue/模糊搜索列表/index.html' },
          { name: "Vue公众号管理页面", url: './code/Vue/公众号管理页面/index.html' },
          { name: "Vue公众号自定义菜单", url: './code/Vue/公众号自定义菜单/index.html' },
          { name: "伪实战电商后台", url: './code/Vue/电商后台管理/index.html' }
      ],
      jQueryAjax: [
          { name: "jQ弹出广告淡闪", url: './code/jq ajax/jq小实例/弹出广告淡闪/free.html' },
          { name: "jQ二级下拉菜单", url: './code/jq ajax/jq小实例/二级下拉菜单/free.html' },
          { name: "jQ跟做二级弹出菜单栏", url: './code/jq ajax/jq小实例/跟做二级弹出菜单栏/free.html' },
          { name: "jQ滚动广告淡入淡出", url: './code/jq ajax/jq小实例/滚动广告淡入淡出/free.html' },
          { name: "jQ跟做游戏狂拍灰太狼", url: './code/jq ajax/jq小实例/狂拍灰太狼/free.html' },
          { name: "jQ输入图片地址切换图片", url: './code/jq ajax/jq小实例/输入图片地址转换/free.html' },
          { name: "jQ鼠标随意拖动元素", url: './code/jq ajax/jq小实例/鼠标随意拖动div/2.html' },
          { name: "jQ图标特效", url: './code/jq ajax/jq小实例/图标特效 css注意空格 回调函数的嵌套 遍历绑定/free.html' },
          { name: "jQ模拟微博动态 增删", url: './code/jq ajax/jq小实例/微博动态 增删/free.html' },
          { name: "jQ无限匀速轮播进阶版", url: './code/jq ajax/jq小实例/无限匀速轮播进阶版/free.html' },
          { name: "jQ自制二级弹出菜单栏", url: './code/jq ajax/jq小实例/自制二级弹出菜单栏/free.html' },
      ],
      CssJsCode: [
          { name: "js原生贪吃蛇(跟做)", url: './code/css js/C js原生贪吃蛇/index.html' },
          { name: "js王者荣耀首页", url: './code/css js/D 王者荣耀首页/index.html' },
          { name: "js轮播图", url: './code/css js/E 轮播图/index.html' },
          { name: "CSS3动画 请缩放网页观看", url: './code/css js/F CSS3动画/free.html' },
          { name: "CSS3动画2 缩放网页", url: './code/css js/F CSS3动画2/free.html' },
          { name: "待改善 3D轮播图", url: './code/css js/F 待改善 3D轮播图/free.html' },
          { name: "移动端苏宁", url: './code/css js/苏宁首页/index.html' },
      ],
      firstCode:[
          { name: "初学时做了很久的淘宝网", url: './code/Z 小项目/A伪实战/渡一淘宝网/index.html' },
      ],
    }
  },
  computed:{
    listSub(){
      var listAll = [...this.Vue , ...this.jQueryAjax , ...this.CssJsCode , ...this.firstCode]
      return listAll;
    },
    listSo(){
        if(this.inputText != ""){

            let arr = []
            this.listSub.forEach(element => {
                var value = element.name.toLowerCase().indexOf(this.inputText.toLowerCase())

                if(value == 0 || value > 0){
                    arr.push(element)
                }

            });

            return arr;

                        //模糊搜索大小写未做
            //不模糊搜索
            // return this.list.filter( item => item.name == this.str );
        }
    },
  },
  methods:{
    getLogo(){
      this.logo = logo
    }
  },
  created(){
    this.getLogo()
  },
  components:{
    Msg,
  }
}
</script>

<style lang="less">
#Home{
  .top{
    height: 100px;
    // border: none;
    .el-card__body{
    display: flex;
    justify-content: space-between;
    }
    .logo{
      width: 60px;
      height: 60px;
      border-radius: 50px;
      margin-left: 150px;
    }
    h1{
      display: inline-block;
      transform: translateY(-18px);
      margin-left: 15px;
    }
    input{
      width: 190px;
      height: 40px;
      outline: none;
      border-radius: 5px;
      margin-right: 150px;
      margin-top: 8px;
      font-size: 16px;
      border: none;
      border: 1px solid gray;
      padding-left: 6px;
    }
  }


  .main{
    width: 1400px;
    min-height: 815px;
    margin: auto;
    border: none;
    .left{
      float: left;
      width:70%;
      text-align: center;
      .list{
        margin: 15px 0px;
      }
      .el-col{
        border-radius: 6px;
        line-height: 50px;
      }
    }
    .right{
      float: left;
      width: 28%;
      margin-left: 22px;
    }
  }




    .container{
      width: 1400px;
      height: 60px;
      margin: auto;
      text-align: center;
    }
    a{
      color: gray;
      margin: 0 15px;
    }
  
}
</style>